<!-- Nested node template -->
<div class="panel panel-default">
    <div class="panel-body" style="min-height: 1000px;">

        <script type="text/ng-template" id="nodes_renderer.html">
        <div ui-tree-handle class="tree-node tree-node-content" ng-click="getInfo(node)">
          <a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)">
            <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed }"></span>
          </a>
          <font size="3">{{node.sale_name}}<span ng-show="node.sale_code">[{{node.sale_code}}]</font>
          <p class="text-right" style="margin-top: 5px; margin-bottom: 0px">
            <small ng-show="node.guide_price != undefined">
              <font size="2">成本价{{node.cost_price | currency : '¥'}} </font>
            </small>
            <small ng-show="node.guide_price != undefined">
              <font size="2">指导价{{node.guide_price | currency : '¥'}} </font>
            </small>
            <small ng-show="node.market_price != undefined">
              <font size="2">门市价{{node.market_price | currency : '¥'}}</font>
            </small>
            <small ng-show="node.govsubsidy_price != undefined && node.govsubsidy_price != -1">
              <font size="2">政府补贴{{node.govsubsidy_price | currency : '¥'}} </font>
            </small>
          </p>
        </div>
        <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
          <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'" style="margin-left:20px"></li>
        </ol>
      </script>

        <div class="row">
            <div class="col-xs-12 row">
                <!-- 左侧树结构  -->
                <div class="col-xs-12" style="max-height:369px; overflow: auto">
                    <div class="row form-horizontal">
                        <label class="col-xs-3 control-label text-right">景区搜索</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" ng-model="query" ng-change="findNodes()">
                        </div>
                    </div>
                    <div ui-tree id="tree-root" data-nodrop-enabled="true" data-drag-enabled="false">
                        <ol ui-tree-nodes ng-model="treeData">
                            <li ng-repeat="node in treeData" ui-tree-node ng-show="visible(node)" ng-include="'nodes_renderer.html'"></li>
                        </ol>
                    </div>
                </div>

                <!-- 右侧详细列表  -->
                <div class="row col-xs-12" ng-show="orderInfoShow" style="margin-left: 10px;">
                    <div class="panel panel-success" style="margin-top: 45px;">
                        <div class="panel-heading">{{obj.name}}</div>
                        <div class="panel-body tinfo">
                            <div class="col-xs-12 input-group mt20 row">
                                <div class="col-xs-2 text-right mt10">
                                    购票数量
                                </div>
                                <div class="col-xs-4 ">
                                    <button type="button" class="btn btn-default numText" ng-click="numModify(-1)">-</button>
                                    <input type="number" onkeyup="this.value=this.value.replace(/[^\d]/g,'')" class="numText numInput noArrow" onpaste="return false;"
                                        ng-model="order.num">
                                    <button type="button" class="btn btn-default numText" ng-click="numModify(1)">+</button>
                                </div>
                                <div class="col-xs-6"></div>
                            </div>
                            <div class="col-xs-12 input-group mt20 row">
                                <div class="col-xs-2 text-right mt10">
                                    出游时间
                                </div>
                                <div class="col-xs-4 ">
                                    <input type="text" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="section_date.label" is-open="section_date.opened"
                                        readonly close-text="关闭" current-text="今天" clear-text="清除" ng-click="open($event, section_date)"
                                    />
                                </div>
                                <div class="col-xs-6"></div>
                            </div>
                            <div class="col-sm-12" ng-show="obj.tour_date_type == '1'">
                                <p class="form-control-static text-danger">出游时间必填，该票种只能在出游日期使用！！！！</p>
                            </div>
                            <div class="col-xs-12 input-group mt20 row ">
                                <div class="col-xs-2 text-right mt10">
                                    支付方式
                                </div>
                                <div class="col-xs-4 ">
                                    <div class="radio">
                                        <label class="i-checks">
                                            <input type="radio" name="-_-" ng-model="order.pay_method" value="account">
                                            <i></i>平台预存支付
                                        </label>
                                        <label class="i-checks ml20" ng-if="obj.authorized_type == '0'">
                                            <input type="radio" name="-_-" ng-model="order.pay_method" value="credit">
                                            <i></i>供应商预存支付
                                        </label>
                                    </div>
                                </div>
                                <div class="col-xs-6"></div>
                            </div>
                            <div class="col-xs-12 input-group row" style="padding-right: 0px;">
                                <div class="col-xs-2 text-right mt10">
                                    游客信息
                                </div>
                                <div class="col-xs-10" style="padding-right: 0px;">
                                    <div class="col-xs-12 mt10" ng-show="orderInfoShow" style="padding-left: 0px;padding-right: 0px;">
                                        <div class="col-xs-12" style="padding-left: 0px;padding-right: 0px;">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    购票人
                                                    <a class="btn btn-xs btn-success" ng-click="add()">添加</a>
                                                    <a class="btn btn-xs btn-danger" ng-click="removeAll()">清空</a>
                                                    <a class="btn btn-success btn-xs pull-right" style="margin-left: 5px;" href="https://oss.juyouhx.com/model.xls">下载模板</a>
                                                    <!-- <a class="btn btn-success btn-xs pull-right" style="margin-left: 5px;" ng-click="exportToExcel('#Excel_table_2')">下载模板</a> -->
                                                    <a class="btn btn-success btn-xs pull-right" style="margin-left: 5px;" ng-click="exportToExcel('#Excel_table')">导出人员信息</a>
                                                    <a class="btn btn-info btn-xs pull-right" ng-click="excel()">导入人员信息</a>
                                                    <a id="dlink" download="{{ExcelName}}.xls" ng-show="false"></a>
                                                </div>
                                                <div class="panel-body" style="padding: 0px;">
                                                    <table class="table table-bordered" style="margin-bottom: 0px;">
                                                        <thead>
                                                            <tr>
                                                                <th class="text-center" style="width: 35px; padding: 0px; padding-bottom: 7px;">序号</th>
                                                                <th class="text-center" style="width: 80px; padding: 0px; padding-bottom: 7px;">姓名</th>
                                                                <th class="text-center" style="width: 171px; padding: 0px; padding-bottom: 7px;">身份证</th>
                                                                <th class="text-center" style="width: 120px;">电话</th>
                                                                <th class="text-center" style="width: 100px;">备注</th>
                                                                <th class="text-center" style="width: 55px; padding: 0px; padding-bottom: 7px;">操作</th>
                                                                <th class="text-center" style="width: 80px; padding: 0px; padding-bottom: 7px;">校验状态</th>
                                                                <th class="text-center">结果</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody class="body_data">
                                                            <tr ng-click="edit($index)" ng-repeat="info in userList" ng-show="userList && userList.length > 0">
                                                                <td class="text-center">
                                                                    {{info.no}}
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control" ng-model="info.name" ng-blur="change($index)" placeholder="姓名">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control" ng-model="info.cardno" ng-blur="change($index)" placeholder="身份证">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control" ng-model="info.mobile" ng-blur="change($index)" placeholder="电话">
                                                                </td>
                                                                <td class="text-center">
                                                                    <textarea ng-model="info.note"></textarea>
                                                                </td>
                                                                <td class="text-center">
                                                                    <a class="btn btn-xs btn-warning mt5" ng-click="remove($index)">删除</a>
                                                                </td>
                                                                <td class="text-center">
                                                                    <div ng-if="info.check && !info.checking && !info.is_exit_order" style="margin: auto; width: 30px; height: 30px; border-radius: 15px; background-color: green;">
                                                                    </div>
                                                                    <div ng-if="!info.check && !info.checking && !info.is_exit_order" style="margin: auto; width: 30px; height: 30px; border-radius: 15px; background-color: red;">
                                                                    </div>
                                                                    <div ng-if="info.is_exit_order" style="margin: auto; width: 30px; height: 30px; border-radius: 15px; background-color: yellow;">
                                                                    </div>
                                                                    <div ng-if="info.checking && !info.is_exit_order" style="margin: auto; width: 30px; height: 30px; border-radius: 15px; background-color: blue;">
                                                                    </div>
                                                                </td>
                                                                <td class="text-center">
                                                                    {{info.msg}}
                                                                </td>
                                                            </tr>
                                                            <tr ng-show="!userList || userList.length == 0">
                                                                <td colspan="7" class="text-center">
                                                                    没有添加购票人
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="col-xs-4"></div>
                            <div class="col-xs-4">
                                <button type="button" class="btn btn-info btn-block mt20" ng-click="buy()" ng-disabled="btnstate">确认购票</button>
                            </div>
                            <div class="col-xs-4"></div>
                        </div>
                    </div>
                </div>

                <!-- 预订须知 -->
                <div class="col-xs-12" ng-show="orderInfoShow">
                    <div class="panel panel-success">
                        <div class="panel-heading">预定需知</div>
                        <div class="panel-body tinfo">
                            <p ng-bind-html="obj.bookingnotes | trustHtml"></p>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>

    <table id="Excel_table" class="table table-bordered" style="margin-bottom: 0px;" ng-show="false">
        <thead>
            <tr>
                <th class="text-center" style="width: 35px; padding: 0px; padding-bottom: 7px;">no</th>
                <th class="col-xs-1 text-center">name</th>
                <th class="text-center" style="width: 171px; padding: 0px; padding-bottom: 7px;">cardno</th>
                <th class="text-center" style="width: 120px;">mobile</th>
                <th class="col-xs-2 text-center">note</th>
                <th class="text-center" style="width: 20%;">result</th>
            </tr>
        </thead>
        <tbody class="body_data">
            <tr ng-click="edit($index)" ng-repeat="info in userList" ng-show="userList && userList.length > 0">
                <td class="text-center">
                    {{info.no}}
                </td>
                <td class="text-center">
                    {{info.name}}
                </td>
                <td class="text-center">
                    `{{info.cardno}}
                </td>
                <td class="text-center">
                    {{info.mobile}}
                </td>
                <td class="text-center">
                    {{info.note}}
                </td>
                <td class="text-center">
                    {{info.msg}}
                </td>
            </tr>
        </tbody>
    </table>

    <table id="Excel_table_2" class="table table-bordered" style="margin-bottom: 0px;" ng-show="false">
        <thead>
            <tr>
                <th class="text-center" style="width: 35px; padding: 0px; padding-bottom: 7px;">no</th>
                <th class="col-xs-1 text-center">name</th>
                <th class="text-center" style="width: 171px; padding: 0px; padding-bottom: 7px;">cardno</th>
                <th class="text-center" style="width: 120px;">mobile</th>
                <th class="col-xs-2 text-center">note</th>
            </tr>
        </thead>
        <tbody class="body_data">
            <tr>
                <td class="text-center">
                    1
                </td>
                <td class="text-center">
                    Marin
                </td>
                <td class="text-center">
                    `210411198003061234
                </td>
                <td class="text-center">
                    13998468549
                </td>
                <td class="text-center">
                    booknote
                </td>
            </tr>
            <tr>
                <td class="text-center">
                    2
                </td>
                <td class="text-center">
                    Zenms
                </td>
                <td class="text-center">
                    `210411198003061234
                </td>
                <td class="text-center">
                    13998468549
                </td>
                <td class="text-center">
                    booknote
                </td>
            </tr>
        </tbody>
    </table>



</div>
<style type="text/css">
    .table-bordered {
        border: 0px solid #ddd !important;
    }

    .body_data td {
        padding: 5px !important;
    }

    * {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .ml20 {
        margin-left: 20px
    }

    /* --- 取消数字输入框后面上下箭头 --- */

    .noArrow::-webkit-outer-spin-button,
    .noArrow::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .noArrow {
        -moz-appearance: textfield;
    }

    .numText {
        width: 40px;
        height: 34px;
        float: left;
        font-size: 16px;
        text-align: center;
    }

    .numInput {
        width: 70px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

    ol,
    li {
        list-style-type: none;
        cursor: pointer;
    }

    .mt20 {
        margin-top: 20px;
    }

    /* --- Tree --- */

    .tree-node {
        padding: 5px;
        font-family: "黑体";
        border: 1px solid #dae2ea;
        background: #f8faff;
        color: #7ea1b6;
    }

    .tree-node-content {
        margin: 10px;
    }

    .tree-node-content:hover {
        color: #3c763d;
        background: #dff0d8;
    }
</style>